<template>
	<view class="body">
		<view class="main">
			<!-- <view class="header">
				<uni-icons type="left" size="30" @click="Blcak"></uni-icons>
				<text>浏览记录</text>
				<uni-icons type="trash" size="30" @click="DeleteList"></uni-icons>
			</view> -->
			<view class="content" v-for="(item,index) in data" >
				<view class="content_top">
					<view class="content_left">
						<image :src="item.headPortrait  == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' : imgs + item.headPortrait" mode="" class="left_img" @click="contentdetail(item.id)"></image>
						<view class="content_ft">
							<view class="gua">
								{{item.nickname}}
							</view>
							<view class="redu">
								<image :src="getimg('/img/allImgs/forum/hot.svg')" mode="" class="redu_img"></image>
								热度：23w
							</view>
						</view>
					</view>
					<uni-icons type="trash" size="30" @click="Delete(item.browsingHistoryId,index)"></uni-icons>
				</view>
				<view class="contet_txt">
					{{item.postContent}}
				</view>
				<view class="content_img">
					<image :src="i.pricturePath" mode="" class="images" v-for="(i,inx) in item.postPicture"
						:key='inx' :style="{marginLeft:inx == 0 || inx % 3 == 0 ? '0' : '15rpx'}"></image>
				</view>
				<view class="content_footer">
					<view class="footer_box">
						<view class="">
							<uni-icons class="uni_incos" type="eye" size="28"></uni-icons> <text
								class="txt">{{item.readingQuantity}}</text>
						</view>
						<view class="">
							<uni-icons class="uni_incos" type="chat" size="28"></uni-icons> <text
								class="txt">{{item.numberOfComments}}</text>
						</view>
						<view class="">
							<uni-icons class="uni_incos" type="hand-up" size="28"></uni-icons><text
								class="txt">{{item.numberLikes}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="提示" :content="isdel == false ?  '确定要删除吗？' : '确定要全部删除吗？'"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		imgBaseUrl
	} from '@/utils/baseUrl'
	import {
		userBrowsePostInformations,
		browsingHistorydel,
		browsingHistorydels
	} from '@/utils/OnetoOneaApi.js'
	export default {
		data() {
			return {
				data: [],
				pageNo: 1,
				imgs: baseURL + '/',
				id:'',
				idx:'',
				delist:[],
				isdel:false//用来判断单个删除还是全部删除
			}
		},
		onLoad() {
			this.dataList()
		},
		onReachBottom() {
			this.pageNo++
			this.dataList()
		},
		methods: {
			//浏览记录列表
			async dataList() {
				const userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo);
				const res = await userBrowsePostInformations(userInfo.id, this.pageNo)
				this.data = [...this.data, ...res.result.records]
			    this.data.map((res)=>{
					this.delist.push(res.browsingHistoryId)
				})
			},
			//返回上一页
			Blcak() {
				uni.navigateBack()
			},
			getimg(image) {
				return imgBaseUrl + '/' + image;
			},
			//删除浏览记录
			Delete(id,index) {
				this.id = id
				this.idx = index
				this.isdel = false
				this.$refs.alertDialog.open()
			},
		  async	dialogConfirm(){
			  
				console.log(this.isdel);
				if(this.isdel == false)
				{
					const  res = await browsingHistorydel(this.id)
					if(res.code == 200)
					{
						const index = this.idx
						this.data.splice(index,1)
						uni.showToast({
							title: '删除成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				}else
				{
					const ids = this.delist.toString()
					const data = await browsingHistorydels(ids)
					if(data.code == 200)
					{
						this.data.splice(0,this.data.length)
						uni.showToast({
							title: '删除成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				}
				
			},
			contentdetail(id)
			{
				uni.navigateTo({
				    url:`../../../subPackagesA/pages/forumDetails/forumDetails?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.content{
	background: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
}
	.body {
		.main {
			padding: 0rpx 25rpx 0 25rpx;

			// .header {
			// 	padding: 120rpx 0 0 0;
			// 	display: flex;
			// 	justify-content: space-between;
			// 	    position: fixed;
			// 	    width: 94%;
			// 	    background: white;
			// }

			.content {
				.content_top {
					display: flex;
					justify-content: space-between;
					padding-top: 42rpx;

					.content_left {
						display: flex;

						.left_img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							opacity: 1;
						}

						.content_ft {
							margin-left: 25rpx;

							.gua {
								font-size: 30rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #222229;
								letter-spacing: 2rpx;
							}

							.redu {
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								letter-spacing: 2rpx;

								.redu_img {
									width: 36rpx;
									height: 36rpx;
									vertical-align: middle;
									opacity: 1;
								}
							}
						}
					}
				}

				.contet_txt {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222229;
					padding: 35rpx 0 20rpx 0;
				}

				.content_img {
					display: flex;
					// justify-content: space-between;
					padding: 20rpx 0 20rpx 0;
					flex-wrap: wrap;

					.images {
						width: 225rpx;
						height: 218rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						margin-top: 15rpx;
						margin-left: 10rpx;
					}
				}

				.content_footer {
					display: flex;

					.footer_box {
						width: 100%;
						padding: 10rpx 75rpx 0 50rpx;
						;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.uni_incos {
							vertical-align: middle;
						}

						.txt {
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>

<style>
page{
	background: #F5F5F5;
	padding-top: 30rpx;
}
</style>